<style lang="scss" scoped>
.delete-button {
  width: 90px;
  font-size: 10px;
  margin-left: 10px;
  height: 30px;
}

.cart-item {
  display: flex;
  margin-top: 20px;
  margin-bottom: 40px;
  background-color: #fff;

  .cart-card {
    background-color: #f5f3f3;
    border-radius: 20px;
  }
}
</style>
<template>
  <div>
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div v-if="cartList.length === 0">
      <van-empty description="购物车为空" />
    </div>
    <div v-else style="height: 100%; width: 100%;">
      <div v-for="item in cartList" :key="item.name" class="cart-item">
        <van-checkbox v-model="item.check" class="cart-checkbox" />
        <van-swipe-cell style="width: 100%">
          <van-card class="cart-card" :price="item.oderprice" :title="item.name" :thumb="item.image">
            <template #footer>
              <van-stepper v-model="item.count" />
           
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" @click="sc" type="danger" style="height: 100%" />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <van-submit-bar :price="totalPrice*100" @submit="zf" button-text="提交订单">
      <van-checkbox v-model="checked">全选</van-checkbox>
        <van-button @click="clearCart" type="danger" class="delete-button">清空购物车</van-button>
    </van-submit-bar>
  </div>
</template>
<script setup lang="ts">
import { cartStore } from '@/stores/cart'

import { computed } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const { clearCart } = cartStore()
const usrStore = cartStore()
const cartList = computed(() => usrStore.cartList)
const checked = computed({
  get() {
    return cartList.value.every((item: any) => item.check)
  },
  set(val: boolean) {
    cartList.value.forEach((item: any) => {
      item.check = val
    })
  }
})
// 计算总价
const totalPrice = computed(() => {
  let total = 0
  cartList.value.forEach((item: any) => {
    if (item.check) {
      total += item.oderprice * item.count
    }
  })
  return total
})


// 删除购物车
const sc = () => {
  cartList.value.splice(0, 1)
}
const onClickLeft = () => history.back();


const zf=async()=>{
   const obj={
    prices:totalPrice.value,
    id: new Date().getTime(),
   }
  console.log(JSON.stringify(obj))
  router.push({path: `/order`,query:{obj:JSON.stringify(obj)}})
}

</script>